﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="stable/static/css/site.css" rel="stylesheet" type="text/css">
    <link href="stable/static/css/print.css" rel="stylesheet" type="text/css" media="print">
    <link href="stable/static/css/prettify.css" rel="stylesheet" type="text/css">
    <link href="//www.google.com/images/icons/product/chrome-16.png" rel="icon" type="image/ico">
    <title>内容安全策略(CSP) - chrome插件中文开发文档(非官方)</title>
</head>
<body>
    <a id="top"></a>
    <div id="header">{Header content}</div>
    <a id="gc-topnav-anchor"></a>
    <div id="gc-topnav">
      <h1>chrome插件中文开发文档(非官方)</h1>
      <ul id="home" class="gc-topnav-tabs">
        <li id="home_link">
          <a href="index.html" title="Google Chrome Extensions home page"><div>主页</div></a>
        </li>
        <li id="docs_link">
          <a href="docs.html" title="Official Google Chrome Extensions documentation"><div>文档</div></a>
        </li>
        <li id="faq_link">
          <a href="faq.html" title="Answers to frequently asked questions about Google Chrome Extensions"><div>常见问题</div></a>
        </li>
        <li id="samples_link">
          <a href="samples.html" title="Sample Extensions (with source code)"><div>示例</div></a>
        </li>
        <li id="group_link">
          <a href="http://groups.google.com/a/chromium.org/group/chromium-extensions" title="Google Chrome Extensions developer forum"><div>google群组(英文)</div></a>
        </li>
        <li id="so_link">
          <a href="http://stackoverflow.com/questions/tagged/google-chrome-extension" title="[google-chrome-extension] tag on Stack Overflow"><div>还有问题?(英文)</div></a>
        </li>
      </ul>
    </div>
    <div id="gc-container">
        <div id="gc-sidebar">
            <ul
                class="level1 ">
                <li class="level2">
                    <a href="getstarted.html" class="level2 ">入门</a>
                </li>
                <li class="level2">
                    <a href="overview.html" class="level2 ">概述</a>
                </li>
                <li class="level2">
                    <a href="whats_new.html" class="level2 ">新功能</a>
                </li>
                <li class="level2">
                    <a href="devguide.html" class="level2 ">开发者指南</a>
                    <ul
                        class="level2 ">
                        <li class="level3">
                            <a class="button level3">
                                <span class="level3">用户界面</span>
                                <div class="toggleIndicator level3"></div>
                            </a>
                            <ul toggleable
                                class="level3 hidden">
                                <li class="level4">
                                    <a href="browserAction.html" class="level4 ">浏览器按钮</a>
                                </li>
                                <li class="level4">
                                    <a href="contextMenus.html" class="level4 ">右键菜单</a>
                                </li>
                                <li class="level4">
                                    <a href="notifications.html" class="level4 ">桌面通知</a>
                                </li>
                                <li class="level4">
                                    <a href="omnibox.html" class="level4 ">多功能地址栏</a>
                                </li>
                                <li class="level4">
                                    <a href="options.html" class="level4 ">选项页面</a>
                                </li>
                                <li class="level4">
                                    <a href="override.html" class="level4 ">代替页面</a>
                                </li>
                                <li class="level4">
                                    <a href="pageAction.html" class="level4 ">页面按钮</a>
                                </li>
                            </ul>
                        </li>
                        <li class="level3">
                            <a class="button level3">
                                <span class="level3">浏览器交互</span>
                                <div class="toggleIndicator level3"></div>
                            </a>
                            <ul toggleable
                                class="level3 hidden">
                                <li class="level4">
                                    <a href="bookmarks.html" class="level4 ">书签</a>
                                </li>
                                <li class="level4">
                                    <a href="cookies.html" class="level4 ">Cookies</a>
                                </li>
                                <li class="level4">
                                    <a href="devtools.html" class="level4 ">开发人员工具</a>
                                </li>
                                <li class="level4">
                                    <a href="events.html" class="level4 ">事件</a>
                                </li>
                                <li class="level4">
                                    <a href="history.html" class="level4 ">历史记录</a>
                                </li>
                                <li class="level4">
                                    <a href="management.html" class="level4 ">管理</a>
                                </li>
                                <li class="level4">
                                    <a href="tabs.html" class="level4 ">标签页</a>
                                </li>
                                <li class="level4">
                                    <a href="windows.html" class="level4 ">窗口</a>
                                </li>
                            </ul>
                        </li>
                        <li class="level3">
                            <a class="button level3">
                                <span class="level3">实现</span>
                                <div class="toggleIndicator level3"></div>
                            </a>
                            <ul toggleable
                                class="level3 hidden">
                                <li class="level4">
                                    <a href="a11y.html" class="level4 ">辅助功能</a>
                                </li>
                                <li class="level4">
                                    <a href="event_pages.html" class="level4 ">事件页面</a>
                                </li>
                                <li class="level4">
                                    <a href="contentSecurityPolicy.html" class="level4 ">内容安全策略(CSP)</a>
                                </li>
                                <li class="level4">
                                    <a href="content_scripts.html" class="level4 ">内容脚本</a>
                                </li>
                                <li class="level4">
                                    <a href="xhr.html" class="level4 ">跨站XMLHttpRequest</a>
                                </li>
                                <li class="level4">
                                    <a href="i18n.html" class="level4 ">国际化</a>
                                </li>
                                <li class="level4">
                                    <a href="messaging.html" class="level4 ">消息传递</a>
                                </li>
                                <li class="level4">
                                    <a href="permissions.html" class="level4 ">可选权限</a>
                                </li>
                                <li class="level4">
                                    <a href="npapi.html" class="level4 ">NPAPI插件</a>
                                </li>
                            </ul>
                        </li>
                        <li class="level3">
                            <a class="button level3">
                                <span class="level3">完成</span>
                                <div class="toggleIndicator level3"></div>
                            </a>
                            <ul toggleable
                                class="level3 hidden">
                                <li class="level4">
                                    <a href="hosting.html" class="level4 ">托管</a>
                                </li>
                                <li class="level4">
                                    <a href="external_extensions.html" class="level4 ">其他部署方案</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li class="level2">
                    <a href="tutorials.html" class="level2 ">教程</a>
                    <ul
                        class="level2 ">
                        <li class="level3">
                            <a href="tut_migration_to_manifest_v2.html" class="level3 ">清单文件V2</a>
                        </li>
                        <li class="level3">
                            <a href="tut_debugging.html" class="level3 ">调试</a>
                        </li>
                        <li class="level3">
                            <a href="tut_analytics.html" class="level3 ">Google Analytics(分析)</a>
                        </li>
                        <li class="level3">
                            <a href="tut_oauth.html" class="level3 ">OAuth</a>
                        </li>
                    </ul>
                </li>
                <li class="level2">
                    <span class="level2">参考</span>
                    <ul
                        class="level2 ">
                        <li class="level3">
                            <a class="button level3">
                                <span class="level3">格式</span>
                                <div class="toggleIndicator level3"></div>
                            </a>
                            <ul toggleable
                                class="level3 hidden">
                                <li class="level4">
                                    <a href="manifest.html" class="level4 ">清单文件</a>
                                </li>
                                <li class="level4">
                                    <a href="match_patterns.html" class="level4 ">匹配表达式</a>
                                </li>
                            </ul>
                        </li>
                        <li class="level3">
                            <a href="permission_warnings.html" class="level3 ">权限警告</a>
                        </li>
                        <li class="level3">
                            <a href="api_index.html" class="level3 ">chrome.* APIs</a>
                        </li>
                        <li class="level3">
                            <a href="api_other.html" class="level3 ">其他APIs</a>
                        </li>
                    </ul>
                </li>
                <li class="level2">
                    <span class="level2">更多</span>
                    <ul
                        class="level2 ">
                        <li class="level3">
                            <a href="http://code.google.com/chrome/webstore/docs/index.html" class="level3 ">chrome商店</a>
                        </li>
                        <li class="level3">
                            <a href="http://code.google.com/chrome/apps/docs/developers_guide.html" class="level3 ">托管应用程序</a>
                        </li>
                        <li class="level3">
                            <a href="themes.html" class="level3 ">主题</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div id="gc-pagecontent">
            <h1 class="page_title">内容安全策略 (CSP)</h1>
            <div id="toc">
                <h2>内容</h2>
                <ol>
                    <li>
                        <a href="#restrictions">默认策略限制</a>
                        <ol>
                            <li><a href="#JSEval">eval及相关函数已禁用</a></li>
                            <li><a href="#JSExecution">内嵌JavaScript代码将不会执行</a></li>
                            <li><a href="#resourceLoading">只有本地脚本和对象资源才会载入</a></li>
                        </ol>
                    </li>
                    <li>
                        <a href="#relaxing">放宽默认策略</a>
                        <ol>
                            <li><a href="#relaxing-inline-script">内嵌脚本</a></li>
                            <li><a href="#relaxing-remote-script">远程脚本</a></li>
                            <li><a href="#relaxing-eval">JavaScript求值</a></li>
                        </ol>
                    </li>
                    <li>
                        <a href="#tightening">使用更严格的策略</a>
                    </li>
                </ol>
            </div>




            <p>
                为了缓解很大一部分潜在的跨站脚本问题，Chrome浏览器的扩展程序系统引入了
 
                <a href="http://dvcs.w3.org/hg/content-security-policy/raw-file/tip/csp-specification.dev.html">
                    <strong>内容安全策略（CSP）</strong>
                </a>的一般概念。这将引入一些相当严格的策略，会使得扩展程序在默认情况下更加安全，并向您提供创建并强制应用一些规则，管理您的扩展程序和应用程序允许载入的内容类型。
            </p>

            <p>
                大体上，CSP以白名单/黑名单的机制对您的扩展程序载入或执行的资源起作用。为您的扩展程序定义一项合理的策略使您仔细考虑您的扩展程序需要的资源，并且使浏览器确保您的扩展程序只能访问指定的那些资源。这些策略提供了比您的扩展程序请求的<a href="manifest.html#permissions">主机权限</a>
更高的安全性，它们是额外的保护层，而不是主机权限的替代品。
            </p>

            <p>
                在网页中，这样的策略通过HTTP头信息或者<code>meta</code>
                元素定义。在Chrome浏览器的扩展程序系统中，它们都不是合适的方式。扩展程序的策略通过扩展程序的
 
                <a href="manifest.html"><code>manifest.json</code></a>文件定义，如下所示：
            </p>

            <pre>{
  ...,
  "content_security_policy": "[策略字符串写在这里]"
  ...
}</pre>

            <p class="note">
                有关CSP语法的完整详情，请参见
 
                <a href="http://dvcs.w3.org/hg/content-security-policy/raw-file/tip/csp-specification.dev.html#syntax">内容安全策略规范
  </a>（英文）,还可参考HTML5Rocks上的<a href="http://www.html5rocks.com/en/tutorials/security/content-security-policy/">内容安全策略简介
  </a>（英文）这篇文章。
            </p>

            <h2 id="restrictions">默认策略限制</h2>

            <p>
                 没有定义<a href="manifestVersion.html">
                    <code>manifest_version</code>（清单文件版本）
                </a> 的扩展程序包没有默认的内容安全策略，而选择
 
                <code>manifest_version</code></a> 2的扩展程序具有如下默认的内容安全策略：
            </p>

            <pre>script-src 'self'; object-src 'self'</pre>

            <p>
             这一策略通过三种方式限制扩展程序和应用程序，来增强安全性：
            </p>

            <h3 id="JSEval">eval及相关函数已禁用</h3>

            <p>如下所示的代码不能工作：</p>

            <pre>
alert(eval("foo.bar.baz"));
window.setTimeout("alert('hi')", 10);
window.setInteral("alert('hi')", 10);
new Function("return foo.bar.baz");
</pre>

            <p>
                像这样对JavaScript字符串求值是一种常见的XSS攻击载体，而您应该编写如下所示的代码：


                <pre>
alert(foo && foo.bar && foo.bar.baz);
window.setTimeout(function() { alert('hi'); }, 10);
window.setInterval(function() { alert('hi'); }, 10);
function() { return foo && foo.bar && foo.bar.baz };
</pre>

                <h3 id="JSExecution">内嵌JavaScript代码将不会执行</h3>

                <p>
                    内嵌JavaScript代码将不会执行。这一限制<strong>既禁用了</strong>内嵌的

                    <code>&lt;script&gt;</code>块，<strong>同时也包括</strong>内嵌的事件处理函数（例如<code>&lt;button onclick="..."&gt;</code>).
                </p>

            <p>
                第一个限制使您不可能意外地执行任何恶意的第三方提供的脚本，彻底消除了一大部分的跨站脚本攻击。然而，这也确实要求您在编写代码时清晰地将内容与行为分开（这也是您当然应该做的吧？）。举一个例子可能会更加清楚，您可能想要编写一个包含如下内容的
 <code>popup.html</code>，作为
                <a href="browserAction.html#popups">浏览器按钮的弹出内容</a>
            </p>

            <pre>&lt;!doctype html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;我做的很棒的弹出内容！&lt;/title&gt;
    &lt;script&gt;
      function awesome() {
        // 做些很棒的事情！
      }

      function totallyAwesome() {
        // 做些棒极了的事情！
      }

      function clickHandler(element) {
        setTimeout(<strong>"awesome(); totallyAwesome()"</strong>, 1000);
      }

      function main() {
        // 在这里进行初始化工作。
      }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="main();"&gt;
    &lt;button <strong>onclick="clickHandler(this)"</strong>&gt;
      单击看看会发生什么！
    &lt;/button&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

            <p>
                三个地方需要修改，才能使以上代码按照您预期的方式工作：
            </p>

            <ul>
                <li><code>clickHandler</code>定义需要移至外部的JavaScript文件中（例如<code>popup.js</code>就不错）。</li>
                <li>
                    <p>
                        内嵌的事件处理定义必须通过
                        <code>addEventListener</code>重写并放在<code>popup.js</code>中。
                    </p>
                    <p>
                        如果您目前仍然通过类似于
   
                        <code>&lt;body onload="main();"&gt;</code>的代码开始执行您的程序，请考虑通过监听文档的
                        <code>DOMContentLoaded</code>事件或window的
   
                        <code>load</code>事件来替换它，选择哪一种取决于您的需要。下面我们将使用前一种形式，因为通常它能够更快触发。
                    </p>
                </li>
                <li><code>setTimeout</code>调用需要重写，避免将字符串<code>"awesome(); totallyAwesome()"</code>转换为JavaScript来执行。</li>
            </ul>

            <p>
                做出这些更改后代码如下所示：
            </p>

            <pre>popup.js:
=========

function awesome() {
  // 做些很棒的事情！
}

function totallyAwesome() {
  // 做些棒极了的事情！
}

<strong>function awesomeTask() {
  awesome();
  totallyAwesome();
}</strong>

function clickHandler(e) {
  setTimeout(<strong>awesomeTask</strong>, 1000);
}

function main() {
  // 在这里进行初始化工作。
}

// 通过监听文档的`DOMContentLoaded`事件在DOM 完全载入后添加事件处理函数，
// 当事件触发时向指定元素添加您自己的事件处理函数。
<strong>document.addEventListener('DOMContentLoaded', function () {</strong>
  document.querySelector('button').addEventListener('click', clickHandler);
  main();
});
</pre>
            <pre>popup.html:
===========

&lt;!doctype html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;我做的很棒的弹出内容！&lt;/title&gt;
    &lt;script <strong>src="popup.js"</strong>&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;button&gt;单击看看会发生什么！&lt;/button&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

            <p>


                <h3 id="resourceLoading">只有本地脚本和对象资源才会载入</h3>

                <p>
                   脚本与对象资源只能从扩展程序包中载入，不能从网上载入。这样确保您的扩展程序只会执行您确实允许的代码，避免任何主动的网络攻击者，恶意地重定向您对资源的请求。
                </p>

            <p>
                不要编写依赖于外部CDN载入的jQuery（或其它库）的代码，而应该考虑将特定版本的jQuery包含在您的扩展程序包中。即，不要：
            </p>

            <pre>&lt;!doctype html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;我做的很棒的弹出内容!&lt;/title&gt;
    &lt;script src="<strong>http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js</strong>"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;button&gt;单击看看会发生什么！&lt;/button&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

            <p>
                而应该下载此文件，包括在您的扩展程序包中，并编写如下代码：
            <p>

                <pre>&lt;!doctype html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;我做的很棒的弹出内容！&lt;/title&gt;
    &lt;script src="<strong>jquery.min.js</strong>"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;button&gt;单击看看会发生什么！&lt;/button&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

                <h2 id="relaxing">放宽默认策略</h2>

                <h3 id="relaxing-inline-script">内嵌脚本</h3>

                <p>
                    您无法放宽限制，允许执行内嵌JavaScript代码。特别地，设置包含
 
                    <code>'unsafe-inline'</code>的脚本策略不会生效。
                </p>

            <h3 id="relaxing-remote-script">远程脚本</h3>

            <p>
                如果您需要某些外部JavaScript代码或对象资源，您可以在有限的程度上放宽策略，将安全来源的可接受脚本加入白名单。我们希望确保以扩展程序提升的权限载入的可执行资源一定是您预期的，而没有被主动的网络攻击者替换。由于
                <a
                    href="http://en.wikipedia.org/wiki/Man-in-the-middle_attack">中间人攻击</a>
                非常普遍，并且通过HTTP无法检测到，其他来源不会被接受。目前，我们允许将来源为以下协议的资源加入白名单：
                <code>HTTPS</code>, <code>chrome-extension</code>和
 
                <code>chrome-extension-resource</code>.
            </p>

            <p>
                为了方便开发，我们也允许将那些通过HTTP从本地计算机服务器上载入的资源列入白名单，您可以将
                <code>http://127.0.0.1</code>或
 
                <code>http://localhost</code>任意端口上的脚本和对象来源加入白名单。
            </p>

            <p class="note">
                对于通过HTTP载入资源的限制仅仅适用于直接执行的那些资源，您仍然可以，例如，向您希望使用的任何来源发起XMLHttpRequest连接，默认策略不会以任何方式限制
                <code>connect-src</code>或者其它任何CSP指示符。
            </p>

            <p>
               允许通过HTTPS载入来自
 
                <code>example.com</code>放宽策略定义如下所示：
            </p>

            <pre>"content_security_policy": "script-src 'self' https://example.com; object-src 'self'"</pre>

            <p class="note">
                注意<code>script-src</code> 与<code>object-src</code>都由这一策略定义，Chrome浏览器不会接受不将这些值限制为（至少）
                <code>'self'</code>的策略。
            </p>

            <p>
                利用Google Analytics（分析）是这一种策略定义的典型例子，这样的情况很常见，所以我们在
                <a href="samples.html#analytics">利用Google Analytics（分析）追踪事件</a>
                的示例扩展程序中提供了简单例子，并在
                <a href="tut_analytics.html">简明教程</a>中提供了更多详情。
            </p>

            <h3 id="relaxing-eval">JavaScript求值</h3>

            <p>
                阻止<code>eval()</code>及类似构造，
 
                <code>setTimeout(String)</code>, <code>setInterval(String)</code>以及
 
                <code>new Function(String)</code>的策略也可以通过向您的策略添加
 
                <code>'unsafe-eval'</code>来放松：
            </p>

            <pre>"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"</pre>

            <p>
              然而我们强烈建议您不要这么做。这些函数是臭名昭著的XSS攻击载体。
            </p>

            <h2 id="tightening">使用更严格的策略</h2>

            <p>
                您当然也可以以带来更多不变为代价，使用您的扩展程序允许的更严格的策略，增强安全性。例如，要指定您的扩展程序只能从自己的包中载入
                <em>所有</em>类型（如图片等）的资源，可以使用这样的策略：<code>default-src 'self'</code>
                <a href="samples.html#mappy">Mappy</a>示例扩展程序就是使用的策略比默认设置更加严格的例子。
            </p>
        </div>
    </div>
</body>
<script>
    window.bootstrap = {
        api_names: [{ "name": "alarms" }, { "name": "bookmarks" }, { "name": "browserAction" }, { "name": "browsingData" }, { "name": "commands" }, { "name": "contentSettings" }, { "name": "contextMenus" }, { "name": "cookies" }, { "name": "debugger" }, { "name": "declarativeWebRequest" }, { "name": "devtools.inspectedWindow" }, { "name": "devtools.network" }, { "name": "devtools.panels" }, { "name": "downloads" }, { "name": "events" }, { "name": "extension" }, { "name": "fileBrowserHandler" }, { "name": "fontSettings" }, { "name": "history" }, { "name": "i18n" }, { "name": "idle" }, { "name": "input.ime" }, { "name": "management" }, { "name": "omnibox" }, { "name": "pageAction" }, { "name": "pageCapture" }, { "name": "permissions" }, { "name": "privacy" }, { "name": "proxy" }, { "name": "runtime" }, { "name": "scriptBadge" }, { "name": "storage" }, { "name": "tabs" }, { "name": "topSites" }, { "name": "tts" }, { "name": "ttsEngine" }, { "name": "types" }, { "name": "webNavigation" }, { "name": "webRequest" }, { "name": "webstore" }, { "last": true, "name": "windows" }].concat(
            [{ "name": "experimental.bluetooth" }, { "name": "experimental.devtools.audits" }, { "name": "experimental.devtools.console" }, { "name": "experimental.discovery" }, { "name": "experimental.identity" }, { "name": "experimental.infobars" }, { "name": "experimental.offscreenTabs" }, { "name": "experimental.processes" }, { "name": "experimental.record" }, { "name": "experimental.speechInput" }, { "name": "experimental.systemInfo.cpu" }, { "name": "experimental.systemInfo.storage" }, { "last": true, "name": "experimental.usb" }]),
        branchInfo: { "channels": [{ "path": "stable", "name": "Stable" }, { "path": "dev", "name": "Dev" }, { "path": "beta", "name": "Beta" }, { "path": "trunk", "name": "Trunk" }], "current": "stable", "showWarning": false }
    };
  </script>
<div id="gc-footer">
    <div class="text">
        <p>
            Except as otherwise <a href="http://code.google.com/policies.html#restrictions">noted</a>,
        the content of this page is licensed under the <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons
        Attribution 3.0 License</a>, and code samples are licensed under the
       
            <a rel="license" href="http://code.google.com/google_bsd_license.html">BSD License</a>.
     
        </p>
        <p>
            ©2012 Google
     
        </p>
        <script src="stable/static/js/branch.js" type="text/javascript"></script>
        <script src="stable/static/js/sidebar.js" type="text/javascript"></script>
        <script src="stable/static/js/prettify.js" type="text/javascript"></script>
        <script>
            (function () {
                // Auto syntax highlight all pre tags.
                var preElements = document.getElementsByTagName('pre');
                for (var i = 0; i < preElements.length; i++)
                    preElements[i].classList.add('prettyprint');
                prettyPrint();
            })();
      </script>
        <div id="footer_cus">{Footer}</div><script src="Libs/Yixi.js"></script><script src="http://s9.cnzz.com/stat.php?id=4928336&web_id=4928336" language="JavaScript"></script>

    </div>
</div>
</html>
